<template>
  <div class="aside">
    <div class="menu">
      <router-link :to="item.path" v-for="item in staticRoutes" :key="item.path" class="btn">
        <el-icon style="padding-right: 15px">
          <component :is="item?.meta?.icon"></component>
        </el-icon>
        {{ item.name }}
      </router-link>
    </div>
  </div>
</template>
<script setup lang="ts">
import { routes } from '@/router/routes.ts'

const staticRoutes = routes.filter((value, index, array) => {
  return !value?.meta?.hiddenInMenu
})
</script>
<style scoped lang="scss">
.aside {
  height: calc(100vh - 70px);
  width: 200px;
  border: 1px solid #e6e6e8;
  position: fixed;
  margin-top: 70px;
  .menu {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    padding-top: 10px;

    .btn {
      height: 40px;
      background: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      color: #171717;
      border-radius: 5px;
      padding-left: 10px;
      margin-top: 4px;
      transition:
        background 0.3s ease,
        color 0.3s ease;
    }

    .btn:hover {
      background: hsl(240 4.8% 95.9%);
      color: #171717;
    }

    .router-link-active {
      background: #171717;
      color: white;
      transition:
        background 0.3s ease,
        color 0.3s ease;
    }

    .router-link-active:hover {
      background: #171717;
      color: white;
    }
  }
}
</style>
